<div class="card">
  <div class="card-header d-flex justify-content-between align-items-center">
    <h5 class="mb-0">粉丝管理</h5>
    <a href="/mpusers/add" class="btn btn-primary btn-sm">添加粉丝</a>
  </div>
  <div class="card-body">
    <!-- 搜索表单 -->
    <form method="GET" class="mb-4">
      <div class="row g-3">
        <div class="col-md-3">
          <input type="text" class="form-control" name="id" placeholder="ID" value="<%= searchParams.id || '' %>">
        </div>
        <div class="col-md-3">
          <input type="text" class="form-control" name="nickname" placeholder="昵称" value="<%= searchParams.nickname || '' %>">
        </div>
        <div class="col-md-3">
          <input type="text" class="form-control" name="appid" placeholder="AppId" value="<%= searchParams.appid || '' %>">
        </div>
        <div class="col-md-3">
          <input type="text" class="form-control" name="openid" placeholder="OpenId" value="<%= searchParams.openid || '' %>">
        </div>
        <div class="col-md-3">
          <input type="text" class="form-control" name="unionid" placeholder="UnionId" value="<%= searchParams.unionid || '' %>">
        </div>
        <div class="col-md-3">
          <select class="form-select" name="status">
            <option value="">选择状态</option>
            <option value="0" <%= searchParams.status === '0' ? 'selected' : '' %>>未关注</option>
            <option value="1" <%= searchParams.status === '1' ? 'selected' : '' %>>已关注</option>
          </select>
        </div>
        <div class="col-md-3">
          <input type="text" class="form-control" name="tag" placeholder="标签" value="<%= searchParams.tag || '' %>">
        </div>
        <div class="col-12">
          <button type="submit" class="btn btn-primary">搜索</button>
          <a href="/mpusers" class="btn btn-secondary">重置</a>
        </div>
      </div>
    </form>

    <!-- 数据表格 -->
    <div class="table-responsive">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>ID</th>
            <th>头像</th>
            <th>昵称</th>
            <th>AppId</th>
            <th>OpenId</th>
            <th>状态</th>
            <th>标签</th>
            <th>创建日期</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <% mpusers.forEach(function(mpuser) { %>
            <tr>
              <td><%= mpuser.id %></td>
              <td>
                <% if (mpuser.photo) { %>
                  <img src="<%= mpuser.photo %>" alt="头像" style="width: 32px; height: 32px; border-radius: 50%;">
                <% } %>
              </td>
              <td><%= mpuser.nickname %></td>
              <td><%= mpuser.appid %></td>
              <td><%= mpuser.openid %></td>
              <td>
                <span class="badge <%= mpuser.status === '1' ? 'bg-success' : 'bg-secondary' %>">
                  <%= mpuser.status === '1' ? '已关注' : '未关注' %>
                </span>
              </td>
              <td><%= mpuser.tag %></td>
              <td><%= mpuser.createAt %></td>
              <td>
                <a href="/mpusers/edit/<%= mpuser.id %>" class="btn btn-sm btn-info">编辑</a>
                <form action="/mpusers/delete/<%= mpuser.id %>" method="POST" class="d-inline">
                  <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('确定要删除吗？')">删除</button>
                </form>
              </td>
            </tr>
          <% }); %>
        </tbody>
      </table>
    </div>

    <!-- 分页 -->
    <% if (pagination.total > 1) { %>
      <nav aria-label="Page navigation">
        <ul class="pagination justify-content-center">
          <% if (pagination.prev) { %>
            <li class="page-item">
              <a class="page-link" href="?page=1<%= Object.entries(searchParams)
                .filter(([key, value]) => value)
                .map(([key, value]) => `&${key}=${encodeURIComponent(value)}`)
                .join('') %>" aria-label="First">
                <span aria-hidden="true">&laquo;</span>
              </a>
            </li>
            <li class="page-item">
              <a class="page-link" href="<%= pagination.pages[0].url %>" aria-label="Previous">
                <span aria-hidden="true">&lsaquo;</span>
              </a>
            </li>
          <% } %>

          <% pagination.pages.forEach(function(page) { %>
            <li class="page-item <%= page.active ? 'active' : '' %>">
              <a class="page-link" href="<%= page.url %>"><%= page.number %></a>
            </li>
          <% }); %>

          <% if (pagination.next) { %>
            <li class="page-item">
              <a class="page-link" href="?page=<%= pagination.next %><%= Object.entries(searchParams)
                .filter(([key, value]) => value)
                .map(([key, value]) => `&${key}=${encodeURIComponent(value)}`)
                .join('') %>" aria-label="Next">
                <span aria-hidden="true">&rsaquo;</span>
              </a>
            </li>
            <li class="page-item">
              <a class="page-link" href="?page=<%= pagination.total %><%= Object.entries(searchParams)
                .filter(([key, value]) => value)
                .map(([key, value]) => `&${key}=${encodeURIComponent(value)}`)
                .join('') %>" aria-label="Last">
                <span aria-hidden="true">&raquo;</span>
              </a>
            </li>
          <% } %>
        </ul>
      </nav>
    <% } %>
  </div>
</div> 